<template>
	<view class="form-wrap">
		<view class="form-group">
			<view class="form-group__title">输入整数</view>
			<view class="form-group__con">
				<input class="form-group__from" name='vals' type="number" placeholder="请输入" placeholder-class="placeholder-class" />
			</view>
		</view>
		<view class="form-group">
			<view class="form-group__title">输入框</view>
			<view class="form-group__con">
				<input class="form-group__from " type="text" placeholder="请输入" placeholder-class="placeholder-class" />
			</view>
		</view>
		<view class="form-group form-group__picker">
			<view class="form-group__title">下拉选择框</view>
			<view class="form-group__con" >
					<picker class="form-group__from" mode="selector" :range="petsType" range-key="name" @change="pickerChange">
						<view v-if="!formDate.petTypeName" class="picker-res placeholder-class">{{pickerRes}}</view>
						<view v-else class="picker-res">{{formDate.petTypeName}}</view>
					</picker>
				<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
			</view>
		</view>
		<!-- 开关 -->
		<view class="form-group form-group__picker">
			<view class="form-group__title">违规扣分</view>
			<view class="form-group__con" style="justify-content: flex-end;">
				<switch :checked='false' color="#0bbf68" />
			</view>
		</view>
		<view class="form-group form-group__picker">
			<view class="form-group__title">选择地址</view>
			<view class="form-group__con" @click="changeShow('showAddress', true)">
				<view class="placeholder-class">点击选择</view>
				<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
			</view>
			<u-picker mode="region" v-model="showAddress"  :area-code='["13", "1303", "130304"]'></u-picker>
		</view>
		
		<view class="form-group form-group__picker">
			<view class="form-group__title">选择时间</view>
			<view class="form-group__con" @click="changeShow('showTime', true)">
				<view v-if="!formDate.adoptionTime" class="placeholder-class">点击选择</view>
				<view v-else>{{common.subTime(formDate.adoptionTime, 10)}}</view>
				<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
			</view>
			<u-picker mode="time" @confirm='selectTime' v-model="showTime" ></u-picker>
		</view>
		
		<view class="form-group form-group__checkbox">
			<view class="form-group__title">多选框</view>
			<view class="form-group__con ">
				<view :class="formDate.bookingType === item.id?'op op-active':'op'" v-for="(item, index) in serviceType" @click="muSelect(item.id)">{{item.name}}</view>
				<view class="op op-active" @click="muSelect()">2020年夏季垂钓杯</view>
				<view class="op">2020年春季垂钓杯</view>
				<view class="op">2020年冬季垂钓杯</view>
			</view>
		</view>

		<view class="form-group form-group__radio">
			<view class="form-group__title">单选框</view>
			<view class="form-group__con ">
				<view class="op op-active" @click="muSelect()">
					<image class="icon" src="../../static/img/icon_18_on.png" mode=""></image>
					<text>程序内推送</text>
				</view>
				<view class="op op-active" @click="muSelect()">
					<image class="icon" src="../../static/img/icon_18.png" mode=""></image>
					<text>短信内推送</text>
				</view>
			</view>
		</view>
		
		<view class="form-group form-group__upload">
			<view class="form-group__title">请上传身份证</view>
			<view class="form-group__con">
				<view class="upload-item">
					<image class="upload-img" src="../../static/icon_03.png"></image>
					<view class="upload-tip">身份证正面</view>
				</view>
				<view class="upload-item">
					<image class="upload-img" src="../../static/icon_04.png"></image>
					<view class="upload-tip">身份证反面</view>
				</view>
			</view>
		</view>
		
		<view class="form-group form-group__upload">
			<view class="form-group__title">请上传宣传海报</view>
			<view class="form-group__con">
				<u-upload :action="action" :max-count='6' :max-size='2 * 1024 * 1024' @on-uploaded="onUploaded"></u-upload>
			</view>
		</view>
		
		<editor id="editor" class="ql-container" :placeholder="placeholder" @input='inputRemarks'></editor>
		
		<view class="form-group form-group__text">
			<textarea class="form-group__from" value="" placeholder="请输入信息" placeholder-class="placeholder-class" />
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				showAddress: false,
				showTime: false,
				pickerRes: '点击选择',
				range: ['罗冰酱', '娜美桑', '山治', '蒙奇D路飞', '罗罗诺亚索隆', '弗兰奇', '布鲁克', '甚平', '乔巴', '乌索普'],
				list: [
								{
									name: '2020年冬季垂钓杯',
									checked: false,
									disabled: false
								},
								{
									name: '2020年冬季垂钓杯',
									checked: false,
									disabled: false
								},
								{
									name: '2020年冬季垂钓杯',
									checked: false,
									disabled: false
								}
							],
				action: common.apiHost + common.uploadPath,,
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				]
			}
		},
		methods: {
			changeShow(field, value) {
				this.$data[field] = value
			},
			
			muSelect() {},
			
			// 选择时间
			selectTime(e) {
				console.log(e);
				this.formDate.bookingTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			
			onUploaded(res) {
				const that = this
				res = res || []
				console.log(res);
				let temp = []
				if(res.length > 0) {
					res.map(item => {
						let imgPath = JSON.parse(item.response).result
						temp.push(imgPath)
					})
				}
				that.fileList = temp
				this.sendData.rulePicture = temp.join(',')
			}
		}
	}
</script>

<style lang="scss">
	
</style>
